<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 
        map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值
        map()方法按照原始数组元素顺序依次处理元素
        注意:map()不会对空数组检索,也不会改变原始数组;
        语法:   array.function(
                    currentValue:必选当前元素的值,
                    index:可选,元素的索引值,
                    arr:可选,当期元素属于的数组对象){
                        函数体
                    },thisValue:可选,对象作为执行函数回调使用,传递使用,传递给函数,用作"this"的值,如果省略了thisValue,"this"的值为"undefind"
     -->
    <!-- w3c实例 -->
    <p>点击按钮将数组中的每一个元素乘上输入框指定的值,并返回数组</p>
    <p>数组框的数是:<input type="number" id="multiplyWith" value="10"></p>
    <button type="button" onclick="myFunction()">点击</button>
    <p>乘以输入框的新数组:<span id="demo"></span></p>
    <script>
        var numbers = [45, 4, 54, 0, 4, 12];

        function multiplyArrayElement(num) {
            return num * document.getElementById("multiplyWith").value;
        }

        function myFunction() {
            document.getElementById("demo").innerHTML = numbers.map(multiplyArrayElement);
        }
    </script>

    </script>

</body>

</html>